<template>
  <draggable
    :list="templateList"
    :group="{ name: 'template', pull: 'clone', put: false }"
    :clone="cloneTemplate"
    v-bind="dragOptions"
    class="template-area"
  >
    <div
      v-for="element in templateList"
      :key="element.id"
      class="template-item"
    >
      <img
        alt="..."
        v-if="singleLineText(element)"
        class="widget-icon"
        src=""
      />
      <img
        alt="..."
        v-if="multipleLineText(element)"
        class="widget-icon"
        src=""
      />
      <img
        alt="..."
        v-if="numberInput(element)"
        class="widget-icon"
        src=""
      />
      <img
        alt="..."
        v-if="radio(element) || switcher(element)"
        class="widget-icon"
        src=""
      />
      <img
        alt="..."
        v-if="select(element) || checkbox(element)"
        class="widget-icon"
        src=""
      />
      <img
        alt="..."
        v-if="datePicker(element)"
        class="widget-icon"
        src=""
      />
      <img
        alt="..."
        v-if="timePicker(element)"
        class="widget-icon"
        src=""
      />
      <img
        alt="..."
        v-if="rate(element)"
        class="widget-icon"
        src=""
      />
      <img
        alt="..."
        v-if="alert(element)"
        class="widget-icon"
        src=""
      />
      <img
        alt="..."
        v-if="attachment(element)"
        class="widget-icon"
        src=""
      />
      <img
        alt="..."
        v-if="imageUpload(element)"
        class="widget-icon"
        src=""
      />
      {{ element.templateName }}
    </div>
  </draggable>
</template>

<script>
import TypedTemplateMixin from "@/components/form/TypedTemplateMixin";
import draggable from "vuedraggable";

export default {
  name: "XComponentMenu",
  mixins: [TypedTemplateMixin],
  components: {
    draggable
  },
  data: function() {
    return {};
  },
  methods: {}
};
</script>

<style scoped>
.template-area {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  align-content: start;
  height: 100%;
}

.template-item {
  width: 45%;
  margin: 6px 4px;
  cursor: move;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  padding: 8px 4px;
  background-color: white;
  border-radius: 4px;
  border: #ddd 1px solid;
  /*box-shadow: #c8ebfb 2px 2px 4px;*/
  font-weight: bolder;
}
.widget-icon {
  width: 18px;
  height: 18px;
  margin-right: 5px;
}
.ghost {
  opacity: 0.5;
  background: #c8ebfb;
}
</style>
